<template>
  <div>
    <data-table :head="thead3" :data="tableData3" :page='currentPage' @callback="manipulate3"
                class="intendance-table" :actions="['edit','view','del']"></data-table>
    <i class="el-icon-circle-plus-outline add-icon" @click="addhy"></i>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
                   :total="totalPage" background>
    </el-pagination>
    <el-dialog title="" :visible.sync="cyDetail" width="80%" append-to-body class="dialogDetail" @close="toClose">
      <h2 class="titleblue">{{hyTitle}}</h2>
      <div class="contant">
        <el-row>
          <el-form ref="form" :model="spc">
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class"><i>*</i>公司名称</label>
                <el-input v-model="spc.name" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">组织机构代码</label>
                <el-input v-model="spc.orgCode" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">注册地</label>
                <el-input v-model="spc.location" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">注册地址</label>
                <el-input v-model="spc.address" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">公司性质</label>
                <el-select v-model="spc.type" :disabled='readread' class="select-width-220 fl">
                  <el-option v-for="item in gsxzOptions" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <!-- <el-input v-model="spc.gsxz" :readonly='readread' class="select-width-220 fl"></el-input> -->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">法人代表</label>
                <el-input v-model="spc.owner" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">管辖机构</label>
                <el-select clearable v-model="spc.manageOrg" :disabled='readread' class="select-width-220 fl">
                  <el-option v-for="item in gxjgOptions" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <!-- <el-input v-model="spc.gxjg" :readonly='readread' class="select-width-220 fl"></el-input> -->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">业务单位</label>
                <el-input v-model="spc.auditOrg" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">体制内</label>
                <el-radio v-model="spc.inSystem" :disabled='readread' :label="1" class="fl"
                          style="width: 80px;line-height: 40px;">是
                </el-radio>
                <el-radio v-model="spc.inSystem" :disabled='readread' :label="0" class="fl"
                          style="width: 80px;line-height: 40px;">否
                </el-radio>
                <!--<el-input v-model="spc.inSystem" :readonly='readread' class="select-width-220 fl"></el-input>-->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">联系人</label>
                <el-input v-model="spc.contact" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">联系人电话</label>
                <el-input v-model="spc.telephone" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">传真号码</label>
                <el-input v-model="spc.fax" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class"><i>*</i>机构</label>
                <el-select v-model="spc.organiza" placeholder="海事处" :disabled='readread' class="select-width-220 fl">
                  <el-option v-for="item in organization" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-form>
        </el-row>
        <el-row :gutter="24" class="footerbtn" v-if="hybtn">
          <el-button class="sure" @click="hySurebtn">确定</el-button>
          <el-button class="cancel" @click="toClose">取消</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import dictService from '@/services/DictionaryService.js'
  import * as orgService from '@/services/OrganizationService'
  import * as crewsService from '@/services/CrewsService.js'
  import * as portRegShipsService from '@/services/PortRegShipsService.js'
  import * as berthsService from '@/services/BerthsService.js'
  import * as transCompaniesService from '@/services/TransCompaniesService.js'
  import DataTable from '@/components/common/DataTable.vue'
  import moment from 'moment'

  export default {
    props: ['organization', 'gxjgOptions', 'gsxzOptions'],
    components: {
      'data-table': DataTable
    },
    name: 'TransCompany',
    data: function () {
      return {
        totalPage: 0,
        currentPage: 1,
        spc: {
          location: '',
          name: '',
          address: '',
          type: '',
          manageOrg: '',
          inSystem: 1,
          telephone: '',
          organiza: '',
          orgCode: '',
          owner: '',
          auditOrg: '',
          contact: '',
          fax: ''
        },
        thead3: [
          {
            name: '公司名称',
            prop: 'name'
          },
          {
            name: '注册地',
            prop: 'location'
          },
          {
            name: '公司性质',
            prop: 'type'
          },
          {
            name: '管辖机构',
            prop: 'manageOrg'
          },
          {
            name: '体系内',
            prop: 'inSystem'
          }
        ],
        tableData3: [],
        cyDetail: false,
        name: '111',
        hyTitle: '添加航运公司',
        readread: false,
        hyId: '',
        hybtn: true,
        detailId: null,
        createTime: null
      }
    },
    mounted () {
      this.getData(0)
    },
    methods: {
      toClose () {
        this.cyDetail = false
        // this.spc = {}
        this.readread = false
      },
      handleQuery (param) {
        // ({type: this.type, manageOrg: this.manageOrg, inSystem: this.inSystem})
        var query = ''
        if (param.type) {
          query += 'type==' + param.type
        }
        if (param.manageOrg) {
          if (query.length) {
            query += ';'
          }
          query += 'manageOrg==' + param.manageOrg
        }
        if (param.inSystem != 2) {
          if (query.length) {
            query += ';'
          }
          var str = ''
          if (param.inSystem == 1) {
            str = 'true'
          } else if (param.inSystem == 0) {
            str = 'false'
          }
          query += 'inSystem==' + str
        }
        return query
      },
      async search (param) {
        this.currentPage = param.currentPage
        let query = await this.handleQuery(param)
        this.getData(param.currentPage - 1, query)
      },
      getData (num, query = '') {
        transCompaniesService.search(num, query).then(async res => {
          let arr = []
          this.totalPage = parseInt(res.headers['x-total-count'])
          await res.data.forEach(item => {
            if (item.manageOrg) {
              this.gxjgOptions.forEach(value => {
                if (value.id == item.manageOrg) {
                  item.manageOrg = value.name
                }
              })
            }
            if (item.type) {
              this.gsxzOptions.forEach(value => {
                if (value.id == item.type) {
                  item.type = value.name
                }
              })
            }
            if (item.inSystem == 0) {
              item.inSystem = '否'
            } else if (item.inSystem == 1) {
              item.inSystem = '是'
            }
            arr.push(item)
          })
          this.tableData3 = arr
        })
      },
      async hySurebtn () {
        if (!this.spc.name) {
          this.$alert('请输入公司名称')
          return false
        }
        if (!this.spc.organiza) {
          this.$alert('请输入所属机构')
          return false
        }
        let organiza = {}
        await this.organization.forEach(item => {
          if (item.id == this.spc.organiza) {
            // organiza = item
            organiza = {id: item.id}
          }
        })
        let obj = {
          organiza,
          location: this.spc.location ? this.spc.location : '',
          name: this.spc.name ? this.spc.name : '',
          address: this.spc.address ? this.spc.address : '',
          type: this.spc.type ? this.spc.type : '',
          manageOrg: this.spc.manageOrg ? this.spc.manageOrg : '',
          inSystem: this.spc.inSystem == 1 ? true : false,
          telephone: this.spc.telephone ? this.spc.telephone : '',
          orgCode: this.spc.orgCode ? this.spc.orgCode : '',
          owner: this.spc.owner ? this.spc.owner : '',
          auditOrg: this.spc.auditOrg ? this.spc.auditOrg : '',
          contact: this.spc.contact ? this.spc.contact : '',
          fax: this.spc.fax ? this.spc.fax : ''
        }
        if (this.hyTitle == '编辑航运公司') {
          obj.id = this.detailId
          obj.createTime = this.createTime
          transCompaniesService.update(obj).then(res => {
            if (res) {
              this.cyDetail = false
              this.getData(0)
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
            }
          })
        } else {
          transCompaniesService.create(obj).then(res => {
            if (res) {
              this.cyDetail = false
              this.getData(0)
              this.$message({
                type: 'success',
                message: '创建成功!'
              })
            }
          })
        }
      },
      addhy () {
        this.hyId = ''
        this.cyDetail = true
        this.readread = false
        this.hyTitle = '添加航运公司'
        this.spc = {}
        this.hybtn = true
      },
      showDetail (data) {
        for (let key in data) {
          if (key == 'id') {
            this.detailId = data[key]
          } else if (key == 'createTime') {
            this.createTime = data[key]
          } else if (key == 'organiza') {
            if (data.organiza) {
              this.spc.organiza = data.organiza.id
            }
          } else if (key == 'inSystem') {
            if (data[key] == '是') {
              this.spc[key] = 1
            } else if (data[key] == '否') {
              this.spc[key] = 0
            }
          } else if (key == 'manageOrg' && data[key]) {
            this.gxjgOptions.forEach(item => {
              if (data[key] == item.name) {
                this.spc[key] = item.id
              }
            })
          } else if (key == 'type' && data[key]) {
            this.gsxzOptions.forEach(item => {
              if (data[key] == item.name) {
                this.spc[key] = item.id
              }
            })
          } else {
            this.spc[key] = data[key]
          }
        }
      },
      manipulate3 (param) {
        if (param.action == 'view') {
          this.cyDetail = true
          this.hyTitle = '航运公司详情'
          this.readread = true
          this.hybtn = false
          this.showDetail(param.data)
        } else if (param.action == 'edit') {
          this.cyDetail = true
          this.hyTitle = '编辑航运公司'
          this.readread = false
          this.hybtn = true
          this.showDetail(param.data)
        } else if (param.action == 'del') {
          transCompaniesService.deleteById(param.data.id).then(res => {
            this.getData(0)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }
      },
      handleSizeChange (val) {
        this.$emit('update', val)
        this.getData(val - 1)
      },
      handleCurrentChange (val) {
        this.$emit('update', val)
        this.getData(val - 1)
        // this.$emit('update:currentPage', val)
      }
    }
  }
</script>
